<!DOCTYPE html>
<html>
<head>
<title>Electromagnetic Field Diagram</title>
</head>
<body>
<canvas id="physicsCanvas" width="500" height="450"></canvas>

<script>
const canvas = document.getElementById('physicsCanvas');
const ctx = canvas.getContext('2d');

// --- Helper function to draw an arrowhead ---
function drawArrowhead(ctx, x, y, angle, size) {
    ctx.save();
    ctx.translate(x, y);
    ctx.rotate(angle);
    ctx.beginPath();
    // The arrowhead points towards the positive x-axis before rotation
    ctx.moveTo(0, 0);
    ctx.lineTo(-size, -size / 2.5);
    ctx.lineTo(-size, size / 2.5);
    ctx.closePath();
    ctx.fill();
    ctx.restore();
}

// --- Diagram parameters ---
const cx = 250;
const cy = 210;
const R = 120;
const torusWidth = 40;
const outerR = R + torusWidth / 2;
const innerR = R - torusWidth / 2;

// --- Style setup ---
ctx.strokeStyle = 'black';
ctx.fillStyle = 'black';
ctx.lineWidth = 2;
ctx.font = "italic 22px 'Times New Roman'";

// 1. Draw the two solid circles (the torus)
ctx.beginPath();
ctx.arc(cx, cy, outerR, 0, 2 * Math.PI);
ctx.stroke();

ctx.beginPath();
ctx.arc(cx, cy, innerR, 0, 2 * Math.PI);
ctx.stroke();

// 2. Draw the dashed circular path
ctx.save();
ctx.setLineDash([6, 6]);
ctx.beginPath();
ctx.arc(cx, cy, R, 0, 2 * Math.PI);
ctx.stroke();
ctx.restore();

// 3. Draw arrows on the dashed path (counter-clockwise)
const arrowSize = 10;
// Arrow 1 (top-left)
let angle1 = 0.8 * Math.PI;
let x1 = cx + R * Math.cos(angle1);
let y1 = cy + R * Math.sin(angle1);
drawArrowhead(ctx, x1, y1, angle1 + Math.PI / 2, arrowSize);

// Arrow 2 (bottom-left)
let angle2 = 1.3 * Math.PI;
let x2 = cx + R * Math.cos(angle2);
let y2 = cy + R * Math.sin(angle2);
drawArrowhead(ctx, x2, y2, angle2 + Math.PI / 2, arrowSize);

// 4. Draw the dashed radius line and label 'R'
ctx.save();
ctx.setLineDash([6, 6]);
let rAngle = 1.4 * Math.PI;
ctx.beginPath();
ctx.moveTo(cx, cy);
ctx.lineTo(cx + R * Math.cos(rAngle), cy + R * Math.sin(rAngle));
ctx.stroke();
ctx.restore();

ctx.fillText('R', cx + 0.5 * R * Math.cos(rAngle) + 15, cy + 0.5 * R * Math.sin(rAngle));

// 5. Draw the point P and the divergence angle
let pAngle = -0.2 * Math.PI; // Approx 2 o'clock position
let px = cx + outerR * Math.cos(pAngle);
let py = cy + outerR * Math.sin(pAngle);

// Point P
ctx.beginPath();
ctx.arc(px, py, 3, 0, 2 * Math.PI);
ctx.fill();

// Label 'P'
ctx.fillText('P', px + 5, py + 20);

// Angle lines
const alpha0 = 0.25; // half angle in radians
const lineLength = torusWidth * 1.1;
const angleBisectorDir = pAngle + Math.PI; // Points from P towards the center

// The two solid lines
ctx.beginPath();
ctx.moveTo(px, py);
ctx.lineTo(px + lineLength * Math.cos(angleBisectorDir - alpha0), py + lineLength * Math.sin(angleBisectorDir - alpha0));
ctx.stroke();

ctx.beginPath();
ctx.moveTo(px, py);
ctx.lineTo(px + lineLength * Math.cos(angleBisectorDir + alpha0), py + lineLength * Math.sin(angleBisectorDir + alpha0));
ctx.stroke();

// The dashed bisector
ctx.save();
ctx.setLineDash([4, 4]);
ctx.beginPath();
ctx.moveTo(px, py);
ctx.lineTo(px + (lineLength * 0.7) * Math.cos(angleBisectorDir), py + (lineLength * 0.7) * Math.sin(angleBisectorDir));
ctx.stroke();
ctx.restore();

// The angle arc
const arcRadius = 25;
ctx.beginPath();
ctx.arc(px, py, arcRadius, angleBisectorDir - alpha0, angleBisectorDir + alpha0);
ctx.stroke();

// The angle label '2α₀'
const labelRadius = arcRadius + 18;
const labelX = px + labelRadius * Math.cos(angleBisectorDir);
const labelY = py + labelRadius * Math.sin(angleBisectorDir);

// Draw '2α'
ctx.font = "italic 22px 'Times New Roman'";
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillText('2α', labelX - 3, labelY); // Adjust position for better centering with subscript

// Draw subscript '₀'
ctx.font = "italic 16px 'Times New Roman'";
ctx.fillText('0', labelX + 13, labelY + 8);

// 6. Draw the caption text
ctx.fillStyle = 'black';
ctx.font = "24px 'SimSun', 'Song Ti'"; // Use a common Chinese font
ctx.textAlign = 'center';
ctx.textBaseline = 'alphabetic';
ctx.fillText('电图 2.16.1', cx, cy + outerR + 60);

</script>
</body>
</html>